import React, { useEffect, useState } from 'react'
import { GetWithdrawalList, GetIncomeList, GetAidouList } from '../../api/mine'
import NavBar from '../../components/Navbar'
import './index.less'
import { useSearchParams } from 'react-router-dom'
import { InfiniteScroll } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'

const statusType = {
  1: 'pending',
  4: 'pending',
  5: 'pending',
  2: 'completed',
  3: 'failed'
}
const statusText = {
  1: '提现中',
  4: '提现中',
  5: '提现中',
  2: '提现成功',
  3: '提现失败'
}
const typeUnit = {
  dou: '-',
  income: '+',
  withdraw: ''
}
const typeUnit2 = {
  2: '-',
  1: '+'
}
const tit = {
  dou: `${window.baseConfig.coin_name}明细`,
  income: '收益明细',
  withdraw: '提现明细'
}

function ExchangeLog({ proType = 'dou', inPage = false }) {
  const params = useSearchParams()[0]
  // const navigate = useNavigate();
  const [data, setData] = useState([])
  const [type, setType] = useState(params.get('type') || proType) // dou | income | withdraw
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)

  const getList = async () => {
    const t = {
      dou: GetAidouList,
      income: GetIncomeList,
      withdraw: GetWithdrawalList
    }
    try {
      await sleep(400)
      const res = await t[type]({
        page: page
      })
      if (res.data && res.data?.length) {
        setData(data.concat(res.data))
      }
      if (res.data && res.data?.length >= 10) {
        setPage(page + 1)
        setHasMore(true)
      } else {
        setHasMore(false)
      }
    } catch (e) {
      console.log(e)
      // setData([])
      setHasMore(false)
    }
  }

  useEffect(() => {
    // getList()
  }, [])

  return (
    <div>
      {!inPage ? (
        <>
          <NavBar title={tit[type]} />
          {type !== 'withdraw' ? (
            <div className="tips">
              {' '}
              <span>仅展示一周内的收支记录</span>{' '}
            </div>
          ) : null}
        </>
      ) : null}

      <div className={`log_list ${type}`}>
        {data.map((item, idx) => (
          <div className={`log-item ${statusType[item.type]}`} key={idx}>
            <div className="info">
              <div className="log_txt p">
                {type === 'withdraw' ? statusText[item.type] : item?.note}
                {type === 'withdraw' && +item.type === 3 ? <span>({item.failReason})</span> : null}
              </div>
              <div className="log_time s">{item?.addtime || ''}</div>
            </div>
            <div className="data">
              <div className="num p">
                {type === 'dou' ? typeUnit2[item?.type || 2] : typeUnit[type]}
                {type === 'withdraw' ? item.money + '元' : item.get_nums + `${window.baseConfig.coin_name}`}
              </div>
            </div>
          </div>
        ))}
        <InfiniteScroll loadMore={getList} hasMore={hasMore} />
      </div>
    </div>
  )
}

export default ExchangeLog
